<!--
 * @Description:改变属性的方式
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-03 22:40:42
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>改变属性的方式</title>
</head>

<body>
	<input id="km" type="button" value="皮肤1" onclick="km1( 'value' ,`['xx2']第二种操作属性的方法`)">
	<div>
		1 行间样式优先级别最高<br />
		1.1如果先给行间 style 样式<br />
		1.2 在给className 元素无效 优先级不够 切记切记 <br />
		1.3 document.createElement('li') 创建一个节点
		1.4 oul.children 属性用法<br />
		1.5 parentNode 父节点<br />
		1.6 offsetParent 获取元素在页面的实际位置<br />
		1.7 父级.appendChild("元素") 添加到末尾元素<br />
		1.8 父级.insertBefore("元素",all[0]) 添加到最前面元素<br />
		1.9 removeChild("父级") 删除一个元素 <br />
		2.0 tBoldies[0].rows[1].cells[1].innerHtml<br />
		2.1 search() 模糊搜索 ==DOM方式操作元素属性 <br />
		2.2 getAttribute(名称) setAttribute(名称) removeAttribute(名称)
		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">1菜单1</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">2菜单2</a>
				</li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet1"><b>3取消</b></a>
				</li>
			</ul>
		</div>
	</div><br />
	<style>
		.d1 {
			background: #000;
			color: #fff;
		}

		.d2 {
			background: yellow;
			color: #000;
		}
	</style>
	<script>
		function km1(name, text) {
			let dv = document.getElementById("km")
			//第一种操作属性的方法 的 。。。
			// dv.value = ".第一种操作属性的方法"
			//第二种操作属性的方法 的 。。。
			dv[name] = text

		}
	</script>

</body>

</html>